@import 'origin.less';

@import 'fnList.less';


body{
    .skeleton();
}
header{
    .width();
    height:2.06rem;
    .travel-header{
        position:fixed;
        top:0;
        left:0;
        z-index:99;
        .width();
        height:0.44rem;
        background:rgba(0,0,0,0.4);
        display:flex;
        justify-content: space-between;
        align-items:center;
        padding:0 0.24rem;
        .travel-header-return{
            width:0.09rem;
            height:0.17rem;
            background:url('../images/icon/return.png') no-repeat;
            background-size:100% 100%;
        }    
        .travel-header-input{
            width:94%;
            font-size:0.14rem;
            border:1px solid rgba(255, 255, 255, 0.5);
            border-radius:0.15rem;
            display:flex;
            align-items:center;
            .input-local{
                display:flex;
                align-items:center;
                padding:0.05rem 0.08rem;
                border-right:1px solid rgba(255, 255, 255, 0.5);
                img{
                    width:0.14rem;
                    height:0.19rem;
                    margin-right:0.05rem;
                }
                span{
                    color:rgba(255,255,255,1);
                }
            }
            .input-search{
                display:flex;
                align-items:center;
                padding:0.05rem 0.08rem;
                img{
                    width:0.17rem;
                    height:0.16rem;
                    margin-right:0.05rem;
                }
                span{
                    color:rgba(255,255,255,0.5);
                }
            }
        }
    }
    .travel-swiper-container{
        width: 100%;
        margin:0 auto;
        max-width:750px;
        height: 100%;
        position: relative;
        overflow:hidden;
        .swiper-wrapper{
            display: flex;
            a{
                display:inline-block;
                // width:100%;
                // height:2.06rem;
            }
            img{
                display: block;
                width:3.75rem;
                height:2.06rem;
            }
        }
        .travel-swiper-pagination{
            display: flex;
            position: absolute;
            right: 0.2rem;
            bottom: 0.105rem;
            span {
                width:0.06rem;
                height: 0.06rem;
                border: 1px solid #0298ca;
                border-radius: 50%;
                margin: 0 0.025rem;
            }
            span.swiper-pagination-bullet-active {
                background-color: #0298ca;
            }
        }
    }
}

section{
    max-width:750px;
    margin:0 auto;
    margin-bottom:0.55rem;
    .travel-sec-head{
        ul{
            font-size:0.12rem;
            .width();
            display:flex;
            justify-content: space-between;
            align-items:center;
            padding:0.32rem;
            li{
                text-align:center;
                width:100%;
                height:100%;
                margin-right:0.04rem;
                p{
                  margin-top:0.08rem;
                  color:grey; 
                }
            }
        }
    }
    .travel-sec-main{
        .width();
        display:flex;
        flex-wrap:wrap;
        margin-bottom:0.2rem;
        .travel-show{
            position: relative;
            img{
                .width();
                display:block;
            }
            .lijian{
                width:0.36rem;
                height:0.36rem;
                background:url('../images/icon/lijian.png') no-repeat;
                background-size:100%;
                position: absolute;
                top:0;
                right:0;
                z-index:10;
            }
        }
    }
    .travel-sec-bottom{
        .width();
        padding:0 0.12rem;
        p{
            display:flex;
            margin-bottom:0.1rem;
            img{
                display:block;
                height:0.16rem;
                margin-right:0.02rem;
            }
        }
        ul{
            display:flex;
            justify-content: space-between;
            flex-wrap:wrap;
            li{
                font-size:0.14rem;
                width:49%;
                border:1px solid lightgrey;
                margin-bottom:0.09rem;
                img{
                    .width();
                }
                >p{
                    padding:0 0.02rem;
                    color:rgba(51,51,51,1);
                }
                div{
                    font-size:0.14rem;
                    display:flex;
                    justify-content: space-between;
                    padding:0 0.05rem;
                    color:rgba(153,153,153,0.8);
                    p{
                        display:flex;
                        align-items: flex-end;
                        font-size:0.14rem;
                        .price{
                            font-size:0.14rem;
                            color:rgba(255,153,0,1);
                        }
                    }
                }
            }
        }
    }
}


footer{
    .width();
    .flexible(50,height);
    .flexible(11,font-size);
    .box-sizing();
    .padding-space(8,24);
    background:#ededed;
    .position-footer();
    ul{
        .flex();
        .flex-justify();
        .flex-align();
        li{
            a{
                .block();
                .textalign();
                .color(#666);
                span{
                    .block();
                    .flexible(26,width);
                    .flexible(23,height);
                    .margin(0);
                }
                .img-index{
                    background:url('../images/icon/luggage_01.png') no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-search{
                    background: url("../images/icon/footer_0322_06.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-history-active{
                    background: url("../images/icon/footer_0322_07.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                .img-myinfo{
                    background: url("../images/icon/footer_0322_08.png") no-repeat;
                    .backgroundSize(100%,100%);
                }
                p{
                    .letter-spacing(2);
                }
            }
            .index{
                p{
                    .color(#1448AE);
                }
            }
        }
    }
}